<template>
  <div>
    <van-nav-bar
      title="发表评论"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="pin">
      <span>评分</span>
      <van-rate
        v-model="value"
        :size="25"
        color="#ffd21e"
        void-icon="star"
        void-color="#eee"
      />
    </div>
    <div class="pin">
      <span>评价</span>
      <textarea
        class="jia"
        v-model="content"
        placeholder="请填写评价"
      ></textarea>
    </div>
    <van-button round type="info" class="btn" @click="btn">提交</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      content: "",
      refid: 0,
      orderId:0
    };
  },
  created() {
    this.refid = this.$route.query.idref;
    this.orderId = this.$route.query.id
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async btn() {
      const { data: res } = await this.$http.put("published", {
        refid: this.refid,
        content: this.content,
        score:this.value,
        orderId:this.orderId
      });
      console.log(res);
      if (res.status !== 200) return this.$message.fail("提交失败");
      this.$message.success("评论成功");
      this.$router.back();
    },
  },
};
</script>

<style lang="less" scoped>
.published {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pin {
  display: flex;
  flex-direction: row;
  margin: 20px;
  > span {
    margin-right: 30px;
    font-size: 18px;
    font-weight: 500;
  }
}
.jia {
  height: 100px;
  width: 70%;
}
.btn {
  width: 90%;
  margin: 5%;
}
</style>